<template>
    <body class="dark min-h-screen overflow-x-hidden bg-background font-sans text-primary antialiased">
        <header class="fixed inset-x-0 top-0 z-50 duration-200 -translate-y-0">
            <div
                class="pointer-events-none absolute inset-x-0 h-32 lg:h-24 duration-200 bg-gradient-to-b from-black lg:from-black/75 opacity-0"
            ></div>
            <div class="mx-auto w-full px-6 xl:max-w-7xl relative">
                <nav class="flex items-center justify-between gap-4 duration-200 py-4 lg:py-6">
                    <!-- 图标 -->
                    <a aria-label="xAI Homepage" href="/"
                        ><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-8">
                            <path
                                d="M2.30047 8.77631L12.0474 23H16.3799L6.63183 8.77631H2.30047ZM6.6285 16.6762L2.29492 23H6.63072L8.79584 19.8387L6.6285 16.6762ZM17.3709 1L9.88007 11.9308L12.0474 15.0944L21.7067 1H17.3709ZM18.1555 7.76374V23H21.7067V2.5818L18.1555 7.76374Z"
                                fill="currentColor"
                            ></path></svg
                    ></a>
                    <ul class="ml-3 hidden flex-grow gap-4 lg:flex">
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/grok">Grok</a></li>
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/api">API</a></li>
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/company">Company</a></li>
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/colossus">Colossus</a></li>
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/careers">Careers</a></li>
                        <li><a class="text-primary/50 mono-tag px-3 py-1.5 text-sm hover:text-primary" href="/news">News</a></li>
                    </ul>
                    <!-- 顶部右侧按钮 -->
                    <div class="flex gap-2">
                        <a
                            target="_blank"
                            class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)]"
                            href="https://grok.com/?referrer=grok"
                            ><span
                                class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                aria-hidden="true"
                            ></span
                            >Try Grok</a
                        >
                        <div>
                            <button
                                type="button"
                                class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 aspect-square px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] visible lg:hidden"
                            >
                                <span
                                    class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                    aria-hidden="true"
                                ></span
                                ><svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 24 24"
                                    fill="currentColor"
                                    aria-hidden="true"
                                    data-slot="icon"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                                        clip-rule="evenodd"
                                    ></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

        <div class="relative h-svh w-full border-b border-border pb-px overflow-hidden md:overflow-x-hidden">
            <div class="relative w-full h-full">
                <div class="mx-auto w-full px-6 xl:max-w-7xl flex h-full flex-col">
                    <div
                        class="absolute -inset-y-[25%] -right-24 flex w-[100vw] flex-col xl:-right-6 xl:w-[1200px]"
                        style="
                            mask-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
                            opacity: 1;
                            transform: none;
                        "
                    >
                        <div class="flex flex-col w-full h-full blur">
                            <div
                                class="grow"
                                style="
                                    background: conic-gradient(
                                        from 180deg at 99% 40% in lab,
                                        rgb(255, 255, 255) 18deg,
                                        rgb(255, 208, 134) 36deg,
                                        rgba(17, 17, 17, 0) 90deg,
                                        rgba(17, 17, 17, 0) 342deg,
                                        rgb(255, 255, 255) 360deg
                                    );
                                "
                            ></div>
                            <div
                                class="grow"
                                style="
                                    background: conic-gradient(
                                        from 0deg at 99% 60% in lab,
                                        rgb(255, 255, 255) 0deg,
                                        rgba(17, 17, 17, 0) 18deg,
                                        rgba(17, 17, 17, 0) 270deg,
                                        rgb(255, 208, 134) 324deg,
                                        rgb(255, 255, 255) 342deg
                                    );
                                "
                            ></div>
                        </div>
                        <canvas class="absolute inset-0 h-full w-full" width="1208" height="1444"></canvas>
                    </div>
                    <div class="relative w-full flex grow items-center justify-start z-20">
                        <div class="space-y-16">
                            <div>
                                <div class="absolute inset-0 top-20 flex justify-center items-center grow">
                                    <div>
                                        <div style="opacity: 1; transform: none">
                                            <img
                                                alt="Outline of the word Grok"
                                                loading="lazy"
                                                width="2299"
                                                height="779"
                                                decoding="async"
                                                data-nimg="1"
                                                class="max-w-screen sm:max-w-full xl:max-w-5xl pointer-events-none select-none"
                                                style="
                                                    color: transparent;
                                                    mask-image: linear-gradient(
                                                        30deg,
                                                        rgba(255, 255, 255, 0) 15%,
                                                        rgba(255, 255, 255, 1),
                                                        rgba(255, 255, 255, 1)
                                                    );
                                                "
                                                src="~/assets/images/grok-outline-home.webp"
                                            />
                                        </div>
                                        <div class="flex justify-center relative z-10 w-full mt-12" style="opacity: 1">
                                            <div class="w-full max-w-xl">
                                                <form
                                                    class="relative w-full items-center gap-3 bg-gradient-to-tr rounded-full p-px from-primary/5 to-primary/20"
                                                >
                                                    <input
                                                        type="text"
                                                        class="w-full h-14 lg:h-[68px] rounded-full border-none pl-6 pr-20 focus:outline-none focus:ring-2 focus:ring-white/50 bg-background text-primary placeholder:text-primary/50"
                                                        placeholder="Ask Grok anything..."
                                                        name="query"
                                                        value=""
                                                    />
                                                    <div class="absolute inset-y-2 right-2 lg:right-4 flex items-center">
                                                        <button
                                                            aria-label="Submit a query to Grok"
                                                            type="submit"
                                                            class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 aspect-square px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] hover:border-[--btn-hover] rounded-full [--btn-bg:theme(colors.primary)] [--btn-border:theme(colors.primary)] [--btn-text:theme(colors.background)] [--btn-hover:theme(colors.primary/80%)] opacity-50"
                                                        >
                                                            <span
                                                                class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                                                aria-hidden="true"
                                                            ></span
                                                            ><svg
                                                                xmlns="http://www.w3.org/2000/svg"
                                                                viewBox="0 0 24 24"
                                                                fill="currentColor"
                                                                aria-hidden="true"
                                                                data-slot="icon"
                                                                class="!size-4"
                                                            >
                                                                <path
                                                                    fill-rule="evenodd"
                                                                    d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
                                                                    clip-rule="evenodd"
                                                                ></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="relative flex items-end justify-between gap-6 py-10 z-10 lg:min-h-[160px]">
                        <div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 24 24"
                                fill="currentColor"
                                aria-hidden="true"
                                data-slot="icon"
                                class="size-6 my-2"
                            >
                                <path
                                    fill-rule="evenodd"
                                    d="M12 2.25a.75.75 0 0 1 .75.75v16.19l6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 1 1 1.06-1.06l6.22 6.22V3a.75.75 0 0 1 .75-.75Z"
                                    clip-rule="evenodd"
                                ></path>
                            </svg>
                        </div>
                        <div class="flex flex-col items-end gap-6 sm:gap-8 lg:gap-12 md:flex-row">
                            <div class="max-w-lg">
                                <div class="hidden sm:block">
                                    We are thrilled to unveil Grok 3, our most advanced model yet, blending superior reasoning with
                                    extensive pretraining knowledge.
                                </div>
                            </div>
                            <div class="flex flex-col gap-3 sm:flex-row">
                                <a
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] hidden lg:flex"
                                    href="/api"
                                    ><span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    ><span>Build with Grok</span></a
                                ><a
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)]"
                                    href="/news/grok-3"
                                    ><span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    ><span>Learn more</span></a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="py-16 sm:py-32">
            <div class="mx-auto w-full px-6 xl:max-w-7xl space-y-16 sm:space-y-32">
                <div class="space-y-12">
                    <div>
                        <div class="mono-tag flex items-center gap-2 text-sm"><span>[</span> <span>Products</span> <span>]</span></div>
                    </div>
                    <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                        <div class="max-w-xl space-y-12">
                            <h2 class="text-balance text-3xl md:text-4xl lg:text-5xl">AI for all humanity</h2>
                        </div>
                    </div>
                </div>
                <div class="grid gap-0 lg:grid-cols-3 lg:-space-x-px">
                    <div
                        class="group relative px-0 py-10 h-full lg:p-8 flex flex-col from-secondary/10 via-transparent to-transparent border-t border-border lg:border-l lg:border-t-0 lg:hover:bg-gradient-to-b md:flex-row lg:flex-col gap-10 overflow-hidden"
                    >
                        <div
                            class="absolute inset-0 pointer-events-none opacity-0 z-10 isolate border border-primary/10 group-hover:opacity-100 hidden lg:block"
                        >
                            <div class="absolute -translate-x-px -translate-y-px -left-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px -translate-y-px -right-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute -translate-x-px translate-y-px -left-1 -bottom-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px translate-y-px -right-1 -bottom-1 size-2 bg-primary z-10"></div>
                        </div>
                        <div class="max-w-sm">
                            <a target="_blank" href="https://grok.com/?referrer=website"
                                ><div class="absolute inset-0"></div>
                                <h3 class="text-xl">Grok</h3></a
                            >
                            <p class="mt-4 text-secondary">
                                Grok is your cosmic guide, now accessible on grok.com, iOS, and Android. Explore the universe with AI.
                            </p>
                        </div>
                        <div class="flex-1 flex flex-col">
                            <div class="opacity-75 flex-1 pointer-events-none">
                                <div class="duration-100 opacity-40 group-hover:opacity-70 group-hover:scale-110 origin-bottom">
                                    <svg
                                        class="w-full scale-[115%] origin-top-right -mt-4"
                                        width="555"
                                        viewBox="0 0 555 384"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g opacity="1">
                                            <mask id="path-1-inside-1_33863_16844" fill="white">
                                                <path
                                                    d="M212.153 339.153L394.78 204.177C403.734 197.56 416.531 200.141 420.798 210.42C443.251 264.625 433.219 329.767 388.546 374.494C343.874 419.218 281.716 429.027 224.903 406.688L162.84 435.458C251.857 496.374 359.952 481.31 427.5 413.635C481.08 359.991 497.674 286.87 482.158 220.932L482.298 221.072C459.797 124.205 487.83 85.4866 545.253 6.31254C546.611 4.43528 547.971 2.55799 549.33 0.633789L473.766 76.2879V76.0533L212.106 339.201"
                                                ></path>
                                            </mask>
                                            <path
                                                d="M394.78 204.177L394.186 203.373L394.186 203.373L394.78 204.177ZM420.798 210.42L421.722 210.037L421.721 210.036L420.798 210.42ZM388.546 374.494L387.838 373.787L387.838 373.787L388.546 374.494ZM224.903 406.688L225.269 405.757L224.871 405.601L224.483 405.781L224.903 406.688ZM162.84 435.458L162.419 434.551L160.824 435.29L162.275 436.283L162.84 435.458ZM427.5 413.635L426.793 412.928L426.793 412.928L427.5 413.635ZM482.158 220.932L482.865 220.225L480.379 217.739L481.184 221.161L482.158 220.932ZM482.298 221.072L481.591 221.78L484.063 224.252L483.272 220.846L482.298 221.072ZM545.253 6.31254L546.062 6.89965L546.063 6.89865L545.253 6.31254ZM549.33 0.633789L550.147 1.21086L548.623 -0.0728977L549.33 0.633789ZM473.766 76.2879H472.766V78.7042L474.473 76.9946L473.766 76.2879ZM473.766 76.0533H474.766V73.6293L473.057 75.3482L473.766 76.0533ZM212.747 339.957L395.375 204.981L394.186 203.373L211.558 338.349L212.747 339.957ZM395.375 204.981C403.889 198.689 415.895 201.216 419.874 210.803L421.721 210.036C417.167 199.065 403.579 196.431 394.186 203.373L395.375 204.981ZM419.874 210.802C442.181 264.655 432.211 329.362 387.838 373.787L389.253 375.2C434.228 330.173 444.321 264.596 421.722 210.037L419.874 210.802ZM387.838 373.787C343.472 418.206 281.745 427.964 225.269 405.757L224.538 407.619C281.688 430.091 344.276 420.231 389.253 375.2L387.838 373.787ZM224.483 405.781L162.419 434.551L163.26 436.365L225.324 407.595L224.483 405.781ZM162.275 436.283C251.698 497.477 360.327 482.35 428.208 414.341L426.793 412.928C359.578 480.269 252.017 495.272 163.405 434.633L162.275 436.283ZM428.208 414.341C482.048 360.437 498.721 286.956 483.131 220.703L481.184 221.161C496.627 286.785 480.112 359.545 426.793 412.928L428.208 414.341ZM481.451 221.639L481.591 221.78L483.005 220.365L482.865 220.225L481.451 221.639ZM483.272 220.846C472.052 172.544 473.454 138.852 484.745 107.395C496.061 75.8726 517.325 46.5225 546.062 6.89965L544.443 5.72543C515.758 45.2767 494.295 74.873 482.863 106.72C471.407 138.633 470.043 172.734 481.324 221.299L483.272 220.846ZM546.063 6.89865C547.42 5.02254 548.783 3.14048 550.147 1.21086L548.514 0.056717C547.158 1.9755 545.802 3.84801 544.443 5.72643L546.063 6.89865ZM548.623 -0.0728977L473.058 75.5812L474.473 76.9946L550.038 1.34048L548.623 -0.0728977ZM474.766 76.2879V76.0533H472.766V76.2879H474.766ZM473.057 75.3482L211.397 338.496L212.815 339.906L474.475 76.7584L473.057 75.3482Z"
                                                fill="url(#paint0_linear_33863_16844)"
                                                mask="url(#path-1-inside-1_33863_16844)"
                                            ></path>
                                            <mask id="path-3-inside-2_33863_16844" fill="white">
                                                <path
                                                    d="M174.472 371.957C110.58 310.85 121.596 216.283 176.112 161.749C216.425 121.387 282.474 104.914 340.13 129.131L402.054 100.502C390.898 92.4302 376.6 83.7478 360.194 77.6466C286.037 47.094 197.253 62.2999 136.971 122.607C78.9858 180.662 60.7511 269.926 92.0642 346.097C115.455 403.025 77.1107 443.292 38.485 483.936C24.7972 498.343 11.0626 512.752 0 528.005L174.425 372.003"
                                                ></path>
                                            </mask>
                                            <path
                                                d="M176.112 161.749L176.82 162.456L176.82 162.456L176.112 161.749ZM340.13 129.131L339.743 130.053L340.15 130.224L340.55 130.039L340.13 129.131ZM402.054 100.502L402.473 101.41L404.024 100.693L402.64 99.6923L402.054 100.502ZM360.194 77.6466L359.813 78.5712L359.829 78.5778L359.845 78.5839L360.194 77.6466ZM136.971 122.607L136.264 121.9L136.264 121.901L136.971 122.607ZM92.0642 346.097L92.9892 345.717L92.9891 345.717L92.0642 346.097ZM38.485 483.936L37.7602 483.247L37.7601 483.247L38.485 483.936ZM0 528.005L-0.809497 527.417L0.666647 528.75L0 528.005ZM175.164 371.234C111.747 310.583 122.627 216.666 176.82 162.456L175.405 161.042C120.565 215.899 109.413 311.118 173.781 372.679L175.164 371.234ZM176.82 162.456C216.864 122.363 282.485 106.003 339.743 130.053L340.518 128.209C282.463 103.825 215.986 120.411 175.405 161.042L176.82 162.456ZM340.55 130.039L402.473 101.41L401.634 99.5947L339.711 128.223L340.55 130.039ZM402.64 99.6923C391.435 91.5845 377.057 82.8508 360.542 76.7093L359.845 78.5839C376.143 84.6447 390.361 93.2758 401.468 101.313L402.64 99.6923ZM360.574 76.722C286.054 46.0198 196.839 61.2995 136.264 121.9L137.678 123.314C197.667 63.3002 286.019 48.1683 359.813 78.5712L360.574 76.722ZM136.264 121.901C77.9954 180.238 59.6717 269.931 91.1393 346.477L92.9891 345.717C61.8304 269.922 79.9763 181.085 137.679 123.314L136.264 121.901ZM91.1392 346.477C102.707 374.631 99.0188 398.622 87.6422 420.665C76.2299 442.776 57.0987 462.898 37.7602 483.247L39.2099 484.625C58.4971 464.33 77.8509 443.996 89.4195 421.582C101.024 399.098 104.812 374.492 92.9892 345.717L91.1392 346.477ZM37.7601 483.247C24.083 497.643 10.2993 512.101 -0.809497 527.417L0.809497 528.592C11.8259 513.403 25.5115 499.043 39.21 484.625L37.7601 483.247ZM0.666647 528.75L175.091 372.748L173.758 371.257L-0.666647 527.259L0.666647 528.75Z"
                                                fill="url(#paint1_linear_33863_16844)"
                                                mask="url(#path-3-inside-2_33863_16844)"
                                            ></path>
                                        </g>
                                        <defs>
                                            <linearGradient
                                                id="paint0_linear_33863_16844"
                                                x1="356.085"
                                                y1="0.633789"
                                                x2="356.085"
                                                y2="473.752"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.802422"></stop>
                                            </linearGradient>
                                            <linearGradient
                                                id="paint1_linear_33863_16844"
                                                x1="201.027"
                                                y1="62.3223"
                                                x2="201.027"
                                                y2="528.005"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.802422"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                            </div>
                            <div class="flex items-center justify-center">
                                <button
                                    type="button"
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover] pointer-events-none"
                                >
                                    <span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    >Use now<svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke-width="1.5"
                                        stroke="currentColor"
                                        aria-hidden="true"
                                        data-slot="icon"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
                                        ></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div
                        class="group relative px-0 py-10 h-full lg:p-8 flex flex-col from-secondary/10 via-transparent to-transparent border-t border-border lg:border-l lg:border-t-0 lg:hover:bg-gradient-to-b md:flex-row lg:flex-col gap-10 overflow-hidden"
                    >
                        <div
                            class="absolute inset-0 pointer-events-none opacity-0 z-10 isolate border border-primary/10 group-hover:opacity-100 hidden lg:block"
                        >
                            <div class="absolute -translate-x-px -translate-y-px -left-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px -translate-y-px -right-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute -translate-x-px translate-y-px -left-1 -bottom-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px translate-y-px -right-1 -bottom-1 size-2 bg-primary z-10"></div>
                        </div>
                        <div class="max-w-sm">
                            <a target="_blank" href="https://console.x.ai/"
                                ><div class="absolute inset-0"></div>
                                <h3 class="text-xl">API</h3></a
                            >
                            <p class="mt-4 text-secondary">
                                Supercharge your applications with Grok's enhanced speed, precision, and multilingual capabilities.
                            </p>
                        </div>
                        <div class="flex-1 flex flex-col">
                            <div class="opacity-75 flex-1 pointer-events-none">
                                <div class="relative">
                                    <div
                                        class="absolute inset-0 -inset-x-8 flex justify-center items-center group-hover:opacity-100 opacity-0 duration-100"
                                    >
                                        <canvas style="width: 100%; height: auto" width="538" height="150"></canvas>
                                    </div>
                                    <svg
                                        class="w-full opacity-40 group-hover:opacity-70 duration-100 group-hover:skew-y-[12deg] group-hover:scale-75 origin-center"
                                        width="488"
                                        viewBox="0 0 488 382"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g opacity="1">
                                            <rect
                                                x="2.21289"
                                                y="1.66309"
                                                width="484.288"
                                                height="415.415"
                                                stroke="url(#paint0_linear_33863_16843)"
                                            ></rect>
                                            <path
                                                d="M16.1765 19.6311L24.299 31.4842H27.9093L19.786 19.6311H16.1765ZM19.7832 26.2144L16.1719 31.4842H19.785L21.5893 28.8498L19.7832 26.2144ZM28.7352 13.1509L22.4928 22.2599L24.299 24.8962L32.3483 13.1509H28.7352ZM29.389 18.7873V31.4842H32.3483V14.469L29.389 18.7873Z"
                                                fill="white"
                                            ></path>
                                            <rect x="406.045" y="14.8174" width="45" height="15" rx="4.5" stroke="white"></rect>
                                            <circle cx="467.545" cy="22.3174" r="7.5" stroke="white"></circle>
                                            <line
                                                x1="88.041"
                                                y1="42.1299"
                                                x2="88.041"
                                                y2="418.281"
                                                stroke="url(#paint1_linear_33863_16843)"
                                            ></line>
                                            <line x1="486.502" y1="42.582" x2="2.21051" y2="42.5821" stroke="white"></line>
                                        </g>
                                        <defs>
                                            <linearGradient
                                                id="paint0_linear_33863_16843"
                                                x1="244.357"
                                                y1="1.16309"
                                                x2="244.357"
                                                y2="417.578"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.8" stop-color="#0A0A0A"></stop>
                                            </linearGradient>
                                            <linearGradient
                                                id="paint1_linear_33863_16843"
                                                x1="86.5402"
                                                y1="42.1299"
                                                x2="86.5402"
                                                y2="418.281"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.8" stop-color="#0A0A0A"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                            </div>
                            <div class="flex items-center justify-center">
                                <button
                                    type="button"
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover] pointer-events-none"
                                >
                                    <span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    >Build now<svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke-width="1.5"
                                        stroke="currentColor"
                                        aria-hidden="true"
                                        data-slot="icon"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
                                        ></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div
                        class="group relative px-0 py-10 h-full lg:p-8 flex flex-col from-secondary/10 via-transparent to-transparent border-t border-border lg:border-l lg:border-t-0 lg:hover:bg-gradient-to-b md:flex-row lg:flex-col gap-10 overflow-hidden"
                    >
                        <div
                            class="absolute inset-0 pointer-events-none opacity-0 z-10 isolate border border-primary/10 group-hover:opacity-100 hidden lg:block"
                        >
                            <div class="absolute -translate-x-px -translate-y-px -left-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px -translate-y-px -right-1 -top-1 size-2 bg-primary z-10"></div>
                            <div class="absolute -translate-x-px translate-y-px -left-1 -bottom-1 size-2 bg-primary z-10"></div>
                            <div class="absolute translate-x-px translate-y-px -right-1 -bottom-1 size-2 bg-primary z-10"></div>
                        </div>
                        <div class="max-w-sm">
                            <a target="_blank" href="https://docs.x.ai/"
                                ><div class="absolute inset-0"></div>
                                <h3 class="text-xl">Developer Docs</h3></a
                            >
                            <p class="mt-4 text-secondary">
                                Learn how to quickly install Grok at the heart of your applications and explore guides covering common use
                                cases.
                            </p>
                        </div>
                        <div class="flex-1 flex flex-col">
                            <div class="opacity-75 flex-1 pointer-events-none">
                                <div class="relative mt-2 opacity-40 group-hover:opacity-70 duration-100">
                                    <svg
                                        class="w-full absolute -top-8 -right-8 group-hover:rotate-3 group-hover:translate-x-4 duration-100"
                                        width="489"
                                        viewBox="0 0 489 382"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g opacity="1">
                                            <rect
                                                x="10.2715"
                                                y="30"
                                                width="432"
                                                height="357"
                                                fill="#0A0A0A"
                                                stroke="url(#paint2_linear_33868_17064)"
                                            ></rect>
                                            <line
                                                x1="55.6387"
                                                y1="97.6836"
                                                x2="394.812"
                                                y2="97.6836"
                                                stroke="white"
                                                stroke-opacity="0.7"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="135.651"
                                                x2="394.812"
                                                y2="135.651"
                                                stroke="white"
                                                stroke-opacity="0.6"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="173.618"
                                                x2="394.812"
                                                y2="173.618"
                                                stroke="white"
                                                stroke-opacity="0.5"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="211.585"
                                                x2="394.812"
                                                y2="211.585"
                                                stroke="white"
                                                stroke-opacity="0.4"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="249.552"
                                                x2="394.812"
                                                y2="249.552"
                                                stroke="white"
                                                stroke-opacity="0.3"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="287.52"
                                                x2="394.812"
                                                y2="287.52"
                                                stroke="white"
                                                stroke-opacity="0.2"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="325.487"
                                                x2="394.812"
                                                y2="325.487"
                                                stroke="white"
                                                stroke-opacity="0.1"
                                            ></line>
                                        </g>
                                        <defs>
                                            <linearGradient
                                                id="paint2_linear_33868_17064"
                                                x1="226.271"
                                                y1="34"
                                                x2="226.271"
                                                y2="390"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.8" stop-color="white" stop-opacity="0"></stop>
                                            </linearGradient>
                                        </defs></svg
                                    ><svg
                                        class="w-full absolute -top-4 -right-4"
                                        width="489"
                                        viewBox="0 0 489 382"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g opacity="1">
                                            <rect
                                                x="10.2715"
                                                y="30"
                                                width="432"
                                                height="357"
                                                fill="#0A0A0A"
                                                stroke="url(#paint2_linear_33868_17064)"
                                            ></rect>
                                            <line
                                                x1="55.6387"
                                                y1="97.6836"
                                                x2="394.812"
                                                y2="97.6836"
                                                stroke="white"
                                                stroke-opacity="0.7"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="135.651"
                                                x2="394.812"
                                                y2="135.651"
                                                stroke="white"
                                                stroke-opacity="0.6"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="173.618"
                                                x2="394.812"
                                                y2="173.618"
                                                stroke="white"
                                                stroke-opacity="0.5"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="211.585"
                                                x2="394.812"
                                                y2="211.585"
                                                stroke="white"
                                                stroke-opacity="0.4"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="249.552"
                                                x2="394.812"
                                                y2="249.552"
                                                stroke="white"
                                                stroke-opacity="0.3"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="287.52"
                                                x2="394.812"
                                                y2="287.52"
                                                stroke="white"
                                                stroke-opacity="0.2"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="325.487"
                                                x2="394.812"
                                                y2="325.487"
                                                stroke="white"
                                                stroke-opacity="0.1"
                                            ></line>
                                        </g>
                                        <defs>
                                            <linearGradient
                                                id="paint2_linear_33868_17064"
                                                x1="226.271"
                                                y1="34"
                                                x2="226.271"
                                                y2="390"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.8" stop-color="white" stop-opacity="0"></stop>
                                            </linearGradient>
                                        </defs></svg
                                    ><svg
                                        class="w-full relative group-hover:-rotate-3 group-hover:-translate-x-4 duration-100"
                                        width="489"
                                        viewBox="0 0 489 382"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g opacity="1">
                                            <rect
                                                x="10.2715"
                                                y="30"
                                                width="432"
                                                height="357"
                                                fill="#0A0A0A"
                                                stroke="url(#paint2_linear_33868_17064)"
                                            ></rect>
                                            <line
                                                x1="55.6387"
                                                y1="97.6836"
                                                x2="394.812"
                                                y2="97.6836"
                                                stroke="white"
                                                stroke-opacity="0.7"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="135.651"
                                                x2="394.812"
                                                y2="135.651"
                                                stroke="white"
                                                stroke-opacity="0.6"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="173.618"
                                                x2="394.812"
                                                y2="173.618"
                                                stroke="white"
                                                stroke-opacity="0.5"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="211.585"
                                                x2="394.812"
                                                y2="211.585"
                                                stroke="white"
                                                stroke-opacity="0.4"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="249.552"
                                                x2="394.812"
                                                y2="249.552"
                                                stroke="white"
                                                stroke-opacity="0.3"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="287.52"
                                                x2="394.812"
                                                y2="287.52"
                                                stroke="white"
                                                stroke-opacity="0.2"
                                            ></line>
                                            <line
                                                x1="55.6387"
                                                y1="325.487"
                                                x2="394.812"
                                                y2="325.487"
                                                stroke="white"
                                                stroke-opacity="0.1"
                                            ></line>
                                        </g>
                                        <defs>
                                            <linearGradient
                                                id="paint2_linear_33868_17064"
                                                x1="226.271"
                                                y1="34"
                                                x2="226.271"
                                                y2="390"
                                                gradientUnits="userSpaceOnUse"
                                            >
                                                <stop stop-color="white"></stop>
                                                <stop offset="0.8" stop-color="white" stop-opacity="0"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                            </div>
                            <div class="flex items-center justify-center">
                                <button
                                    type="button"
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover] pointer-events-none"
                                >
                                    <span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    >Learn more<svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke-width="1.5"
                                        stroke="currentColor"
                                        aria-hidden="true"
                                        data-slot="icon"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
                                        ></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="relative flex justify-center overflow-hidden pb-24">
            <div class="relative h-[600px] lg:h-[1000px] xl:h-[1200px]">
                <div
                    class="absolute left-1/2 top-6 -translate-x-1/2 size-[600px] lg:size-[1000px] xl:size-[1200px] [&amp;>canvas]:!w-full [&amp;>canvas]:!h-full"
                >
                    <canvas
                        style="display: block; width: 1000px; height: 1000px; touch-action: none; cursor: auto"
                        data-engine="three.js r172"
                        width="1000"
                        height="1000"
                    ></canvas>
                </div>
            </div>
            <div class="absolute inset-6 flex flex-col justify-center pointer-events-none">
                <div class="flex w-full max-w-7xl mx-auto">
                    <div
                        style="transform: translateX(38.3774px)"
                        class="text-balance text-4xl leading-[2.25rem] md:text-[5rem] md:leading-[5rem] inline-block py-2 from-secondary to-primary bg-clip-text text-transparent bg-gradient-to-l"
                    >
                        Understand
                    </div>
                </div>
                <div class="flex w-full justify-end max-w-7xl mx-auto">
                    <div
                        style="transform: translateX(-38.3774px)"
                        class="text-balance text-4xl leading-[2.25rem] md:text-[5rem] md:leading-[5rem] inline-block py-2 from-secondary to-primary bg-clip-text text-transparent bg-gradient-to-r"
                    >
                        The Universe
                    </div>
                </div>
            </div>
        </div>

        <section class="py-16 sm:py-32 relative overflow-hidden">
            <div class="mx-auto w-full px-6 xl:max-w-7xl space-y-16 sm:space-y-32">
                <div class="relative flex justify-center items-center py-6">
                    <canvas
                        style="mask: radial-gradient(circle at center, black, transparent)"
                        class="absolute inset-0 h-full w-full -top-16 sm:-top-32"
                        width="1160"
                        height="290"
                    ></canvas>
                    <div
                        class="absolute inset-x-0 -top-16 sm:-top-32 h-px bg-gradient-to-r from-transparent to-transparent via-white opacity-40"
                    ></div>
                    <div
                        class="absolute -inset-x-[200px] lg:-inset-x-[400px] h-[500px] -top-16 sm:-top-32"
                        style="
                            background: linear-gradient(
                                to right,
                                rgba(255, 99, 8, 0.1),
                                rgba(255, 99, 8, 0.1),
                                rgba(189, 201, 230, 0.1),
                                rgba(151, 196, 255, 0.1),
                                rgba(151, 196, 255, 0.1)
                            );
                            mask: radial-gradient(ellipse at top, black, transparent 60%);
                        "
                    ></div>
                    <div class="relative space-y-8 flex flex-col items-center text-center max-w-lg">
                        <svg width="310" height="80" viewBox="0 0 310 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g filter="url(#filter0_i_33774_13227)">
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    d="M54.6483 33.7015L32.4852 50.0817L64.2337 18.1529V18.1813L73.4038 9.00024C73.2389 9.23376 73.0739 9.46158 72.9089 9.6894C65.9403 19.2977 62.5385 23.9964 65.269 35.7519L65.252 35.7348C67.1349 43.7369 65.1211 52.6105 58.619 59.1204C50.4216 67.3333 37.3035 69.1615 26.5007 61.7688L34.0325 58.2775C40.9272 60.9885 48.4704 59.7981 53.8917 54.3704C59.313 48.9426 60.5304 41.0373 57.8055 34.459C57.2878 33.2117 55.7348 32.8984 54.6483 33.7015ZM28.1106 28.5528C21.4947 35.1709 20.1579 46.6473 27.9115 54.0628L27.9058 54.0685L6.73828 73.0003C8.06292 71.1739 9.70323 69.4473 11.3423 67.7221L11.3423 67.7221L11.4087 67.6522L11.4224 67.6378C16.1052 62.7104 20.7467 57.8265 17.9108 50.9246C14.1108 41.6809 16.3237 30.8481 23.3606 23.8028C30.6762 16.4841 41.4506 14.6388 50.4501 18.3465C52.4411 19.0869 54.1761 20.1406 55.53 21.1202L48.0153 24.5944C41.0182 21.6556 33.0029 23.6547 28.1106 28.5528ZM219.135 56.851C209.373 56.851 203.553 49.8216 203.553 40.2364C203.553 30.5608 209.581 23.3606 219.325 23.3606C226.94 23.3606 232.514 27.2308 233.829 34.4311H227.982C227.121 30.336 223.676 28.0409 219.325 28.0409C212.3 28.0409 209.219 34.071 209.219 40.2364C209.219 46.4016 212.3 52.3867 219.325 52.3867C226.033 52.3867 228.979 47.5715 229.206 43.5665H219.099V38.9067H234.373L234.348 41.343C234.348 50.3957 230.628 56.851 219.135 56.851ZM280.239 56.258V24.1269H285.36V45.3323V56.258H280.239ZM285.36 45.3323L296.192 32.9922H302.402L292.657 43.5677L302.492 56.258H296.374L288.408 45.3538L285.36 45.3323ZM264.713 56.7958C257.099 56.7958 252.974 51.4406 252.974 44.6004C252.974 37.7151 257.099 32.4049 264.713 32.4049C272.372 32.4049 276.451 37.7151 276.451 44.6004C276.451 51.4406 272.372 56.7958 264.713 56.7958ZM258.322 44.6004C258.322 49.9106 261.223 52.5658 264.713 52.5658C268.248 52.5658 271.103 49.9106 271.103 44.6004C271.103 39.2903 268.248 36.5902 264.713 36.5902C261.223 36.5902 258.322 39.2903 258.322 44.6004ZM238.722 36.6806V56.2564H243.843V37.3107H252.182V32.9906H243.027L238.722 36.6806ZM81.6712 46.6618C82.11 52.4542 86.5421 57.1057 95.0553 57.1057C102.427 57.1057 107.737 53.5513 107.737 47.671C107.737 42.493 104.227 40.0794 98.127 38.7191L93.3 37.5782C89.7455 36.7883 87.8147 35.5157 87.8147 33.2338C87.8147 30.4254 90.4915 28.6262 94.397 28.6262C98.1709 28.6262 100.935 30.2937 101.374 34.5503H106.772C106.421 28.2751 101.55 24.1941 94.397 24.1941C87.332 24.1941 82.505 28.0119 82.505 33.5849C82.505 39.5529 87.5953 41.3959 92.159 42.4491L96.9422 43.5022C100.76 44.3799 102.296 45.9596 102.296 48.0221C102.296 51.2255 99.0924 52.6297 95.0553 52.6297C90.7987 52.6297 87.8147 51.0061 87.1565 46.6618H81.6712ZM119.855 56.7985C114.019 56.7985 112.044 53.3757 112.044 48.5487V33.5849H117.003V48.2854C117.003 50.8744 118.495 52.5858 121.128 52.5858C125.121 52.5858 127.096 49.6019 127.096 45.7841V33.5849H132.054V56.2719H127.315V52.4103H127.227C125.648 55.4382 123.146 56.7985 119.855 56.7985ZM136.793 33.5849V64.9606H141.752V53.2002H141.883C143.463 55.8331 146.535 56.7985 148.861 56.7985C155.531 56.7985 159.085 51.3571 159.085 44.9065C159.085 38.4558 155.531 33.0144 148.861 33.0144C146.535 33.0144 143.463 33.9798 141.883 36.6128H141.752V33.5849H136.793ZM147.764 52.6736C143.419 52.6736 141.62 48.812 141.62 44.9065C141.62 40.8693 143.419 37.0955 147.764 37.0955C152.196 37.0955 153.907 40.8693 153.907 44.9065C153.907 48.812 152.196 52.6736 147.764 52.6736ZM172.834 56.7985C165.725 56.7985 161.688 51.796 161.688 44.9065C161.688 37.8415 165.725 33.0144 172.439 33.0144C178.977 33.0144 182.97 37.4465 183.19 44.2921L181.04 46.3107H166.734C167.129 50.3479 169.279 52.7614 172.834 52.7614C175.423 52.7614 177.266 51.401 178.187 48.8997H183.102C181.961 54.1217 178.099 56.7985 172.834 56.7985ZM166.866 42.7562H178.275C177.748 38.8946 175.51 36.9199 172.439 36.9199C169.63 36.9199 167.48 39.0702 166.866 42.7562ZM186.842 37.1832V56.2719H191.8V37.7976H199.875V33.5849H191.01L186.842 37.1832Z"
                                    fill="url(#paint0_linear_33774_13227)"
                                ></path>
                            </g>
                            <defs>
                                <filter
                                    id="filter0_i_33774_13227"
                                    x="6.73828"
                                    y="9.00024"
                                    width="295.754"
                                    height="64"
                                    filterUnits="userSpaceOnUse"
                                    color-interpolation-filters="sRGB"
                                >
                                    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
                                    <feColorMatrix
                                        in="SourceAlpha"
                                        type="matrix"
                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                        result="hardAlpha"
                                    ></feColorMatrix>
                                    <feOffset dy="1.04167"></feOffset>
                                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
                                    <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"></feColorMatrix>
                                    <feBlend mode="normal" in2="shape" result="effect1_innerShadow_33774_13227"></feBlend>
                                </filter>
                                <linearGradient
                                    id="paint0_linear_33774_13227"
                                    x1="154.615"
                                    y1="9.00024"
                                    x2="154.615"
                                    y2="73.0003"
                                    gradientUnits="userSpaceOnUse"
                                >
                                    <stop stop-color="white" stop-opacity="0.9"></stop>
                                    <stop offset="1" stop-color="white" stop-opacity="0.5"></stop>
                                </linearGradient>
                            </defs>
                        </svg>
                        <p class="text-secondary text-lg sm:text-xl">
                            Do more with Grok. <br />
                            Unlock a SuperGrok subscription on Grok.com
                        </p>
                        <a
                            target="_blank"
                            class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)]"
                            href="https://grok.com/?show_subscribe=1"
                            ><span
                                class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                aria-hidden="true"
                            ></span
                            >Sign up now<svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke-width="1.5"
                                stroke="currentColor"
                                aria-hidden="true"
                                data-slot="icon"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path></svg
                        ></a>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 sm:py-32">
            <div class="mx-auto w-full px-6 xl:max-w-7xl space-y-16 sm:space-y-32">
                <div class="space-y-12">
                    <div>
                        <div class="mono-tag flex items-center gap-2 text-sm"><span>[</span> <span>Blog</span> <span>]</span></div>
                    </div>
                    <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
                        <div class="max-w-xl space-y-12"><h2 class="text-balance text-3xl md:text-4xl lg:text-5xl">Latest news</h2></div>
                        <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:gap-12">
                            <div>
                                <a
                                    class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)]"
                                    href="/news"
                                    ><span
                                        class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                        aria-hidden="true"
                                    ></span
                                    >Explore more</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="group relative">
                        <div
                            class="flex flex-col gap-10 border-b border-border py-16 last-of-type:border-b-0 first-of-type:border-t md:flex-row md:gap-12"
                        >
                            <div class="flex flex-col gap-4 md:gap-12 xl:flex-row flex-1 order-2 md:order-1">
                                <div class=""><p class="mono-tag text-xs leading-6">February 19, 2025</p></div>
                                <div class="flex flex-1 flex-col space-y-6">
                                    <div class="block grow space-y-4">
                                        <a href="/news/grok-3"
                                            ><div class="absolute inset-0"></div>
                                            <h3 class="text-xl leading-6">Grok 3 Beta — The Age of Reasoning Agents</h3></a
                                        >
                                        <p class="grow text-balance text-secondary">
                                            We are thrilled to unveil an early preview of Grok 3, our most advanced model yet, blending
                                            superior reasoning with extensive pretraining knowledge.
                                        </p>
                                    </div>
                                    <div class="flex items-center justify-between gap-3">
                                        <div><span class="mono-tag text-xs">grok</span></div>
                                        <div>
                                            <button
                                                type="button"
                                                class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover]"
                                            >
                                                <span
                                                    class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                                    aria-hidden="true"
                                                ></span
                                                >Read
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1 xl:max-w-[500px] order-1 md:order-2">
                                <div
                                    class="flex duration-150 items-center whitespace-pre-wrap break-word w-full bg-[#0C0C0B] aspect-[16/10] text-4xl tracking-tight leading-[2.5rem] top-bg-image"
                                >
                                    <div class="flex items-center justify-center w-full h-full">
                                        <div class="flex bg-background px-3 py-2 w-auto max-w-1/2">
                                            <h2 class="uppercase text-balance bg-background text-primary text-3xl">Grok 3</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group relative">
                        <div
                            class="flex flex-col gap-10 border-b border-border py-16 last-of-type:border-b-0 first-of-type:border-t md:flex-row md:gap-12"
                        >
                            <div class="flex flex-col gap-4 md:gap-12 xl:flex-row flex-1 order-2 md:order-1">
                                <div class=""><p class="mono-tag text-xs leading-6">December 23, 2024</p></div>
                                <div class="flex flex-1 flex-col space-y-6">
                                    <div class="block grow space-y-4">
                                        <a href="/news/series-c"
                                            ><div class="absolute inset-0"></div>
                                            <h3 class="text-xl leading-6">xAI raises $6B Series C</h3></a
                                        >
                                        <p class="grow text-balance text-secondary">
                                            We are partnering with A16Z, Blackrock, Fidelity Management &amp; Research Company, Kingdom
                                            Holdings, Lightspeed, MGX, Morgan Stanley, OIA, QIA, Sequoia Capital, Valor Equity Partners and
                                            Vy Capital, amongst others.
                                        </p>
                                    </div>
                                    <div class="flex items-center justify-between gap-3">
                                        <div><span class="mono-tag text-xs">company</span></div>
                                        <div>
                                            <button
                                                type="button"
                                                class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover]"
                                            >
                                                <span
                                                    class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                                    aria-hidden="true"
                                                ></span
                                                >Read
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1 xl:max-w-[500px] order-1 md:order-2">
                                <div
                                    class="flex duration-150 items-center whitespace-pre-wrap break-word w-full bg-[#0C0C0B] aspect-[16/10] text-4xl tracking-tight leading-[2.5rem] center-bg-image"
                                >
                                    <div class="flex items-center justify-center w-full h-full">
                                        <div class="flex bg-background px-3 py-2 w-auto max-w-1/2">
                                            <h2 class="uppercase text-balance bg-background text-primary text-3xl">Series C</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group relative">
                        <div
                            class="flex flex-col gap-10 border-b border-border py-16 last-of-type:border-b-0 first-of-type:border-t md:flex-row md:gap-12"
                        >
                            <div class="flex flex-col gap-4 md:gap-12 xl:flex-row flex-1 order-2 md:order-1">
                                <div class=""><p class="mono-tag text-xs leading-6">December 12, 2024</p></div>
                                <div class="flex flex-1 flex-col space-y-6">
                                    <div class="block grow space-y-4">
                                        <a href="/news/grok-1212"
                                            ><div class="absolute inset-0"></div>
                                            <h3 class="text-xl leading-6">Bringing Grok to Everyone</h3></a
                                        >
                                        <p class="grow text-balance text-secondary">
                                            Grok is now faster, sharper, and has improved multilingual support. It is available to everyone
                                            on the 𝕏 platform.
                                        </p>
                                    </div>
                                    <div class="flex items-center justify-between gap-3">
                                        <div><span class="mono-tag text-xs">grok</span></div>
                                        <div>
                                            <button
                                                type="button"
                                                class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 px-3.5 py-1.5 sm:text-sm [&amp;>[data-slot=icon]]:size-4 [&amp;>[data-slot=icon]]:sm:size-3 gap-x-2 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)] group-hover:bg-[--btn-hover]"
                                            >
                                                <span
                                                    class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                                                    aria-hidden="true"
                                                ></span
                                                >Read
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1 xl:max-w-[500px] order-1 md:order-2">
                                <div
                                    class="flex duration-150 items-center whitespace-pre-wrap break-word w-full bg-[#0C0C0B] aspect-[16/10] text-4xl tracking-tight leading-[2.5rem] bottom-bg-image"
                                >
                                    <div class="flex items-center justify-center w-full h-full">
                                        <div class="flex bg-background px-3 py-2 w-auto max-w-1/2">
                                            <h2 class="uppercase text-balance bg-background text-primary text-3xl">Grok for all</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="relative w-full overflow-hidden border-t border-border/50 pb-32 md:pb-64">
            <div class="absolute inset-0">
                <div class="w-full h-full footer-bg-gradient"></div>
            </div>
            <section class="py-16 sm:py-32">
                <div class="mx-auto w-full px-6 xl:max-w-7xl space-y-16 sm:space-y-32">
                    <div class="relative grid gap-16 md:grid-cols-4">
                        <div>
                            <div class="space-y-5">
                                <div><span class="mono-tag text-sm">Try Grok On</span></div>
                                <div><a target="_blank" class="hover:underline" href="https://grok.com">Web</a></div>
                                <div>
                                    <a target="_blank" class="hover:underline" href="https://apps.apple.com/app/grok/id6670324846">iOS</a>
                                </div>
                                <div>
                                    <a
                                        target="_blank"
                                        class="hover:underline"
                                        href="https://play.google.com/store/apps/details?id=ai.x.grok&amp;hl=en"
                                        >Android</a
                                    >
                                </div>
                                <div><a target="_blank" class="hover:underline" href="https://x.com/i/grok">Grok on X</a></div>
                            </div>
                        </div>
                        <div>
                            <div class="space-y-5">
                                <div><span class="mono-tag text-sm">Products</span></div>
                                <div><a class="hover:underline" href="/grok">Grok</a></div>
                                <div><a class="hover:underline" href="/api">API</a></div>
                            </div>
                        </div>
                        <div>
                            <div class="space-y-5">
                                <div><span class="mono-tag text-sm">Company</span></div>
                                <div><a class="hover:underline" href="/company">Company</a></div>
                                <div><a class="hover:underline" href="/careers">Careers</a></div>
                                <div><a class="hover:underline" href="/contact">Contact</a></div>
                                <div><a class="hover:underline" href="/news">News</a></div>
                            </div>
                        </div>
                        <div>
                            <div class="space-y-5">
                                <div><span class="mono-tag text-sm">Resources</span></div>
                                <div><a target="_blank" class="hover:underline" href="https://status.x.ai">Status</a></div>
                                <div><a class="hover:underline" href="/privacy-policy">Privacy policy</a></div>
                                <div><a class="hover:underline" href="/security">Security</a></div>
                                <div><a class="hover:underline" href="/legal">Legal</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 小屏幕 -->
        <!-- <div class="bg-background flex flex-col fixed h-dvh inset-0 overflow-y-auto z-50">
            <div class="flex items-center justify-between px-6 py-4">
                <div>
                    <a href="/"
                        ><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="size-8">
                            <path
                                d="M2.30047 8.77631L12.0474 23H16.3799L6.63183 8.77631H2.30047ZM6.6285 16.6762L2.29492 23H6.63072L8.79584 19.8387L6.6285 16.6762ZM17.3709 1L9.88007 11.9308L12.0474 15.0944L21.7067 1H17.3709ZM18.1555 7.76374V23H21.7067V2.5818L18.1555 7.76374Z"
                                fill="currentColor"
                            ></path></svg
                    ></a>
                </div>
                <div>
                    <button
                        type="button"
                        class="relative isolate inline-flex items-center justify-center border text-base/6 uppercase font-mono tracking-widest shrink-0 focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500 data-[disabled]:opacity-50 [&amp;>[data-slot=icon]]:-mx-0.5 [&amp;>[data-slot=icon]]:my-0.5 [&amp;>[data-slot=icon]]:shrink-0 [&amp;>[data-slot=icon]]:sm:my-1 aspect-square px-4 py-2 sm:text-sm [&amp;>[data-slot=icon]]:size-5 [&amp;>[data-slot=icon]]:sm:size-4 gap-x-3 bg-[--btn-bg] text-[--btn-text] border-[--btn-border] hover:bg-[--btn-hover] rounded-full [--btn-bg:transparent] [--btn-border:theme(colors.primary/25%)] [--btn-text:theme(colors.primary)] [--btn-hover:theme(colors.secondary/20%)]"
                    >
                        <span
                            class="absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden"
                            aria-hidden="true"
                        ></span
                        ><svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="currentColor"
                            aria-hidden="true"
                            data-slot="icon"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
                                clip-rule="evenodd"
                            ></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="px-6 grow">
                <ul class="flex flex-col py-4 divide-y divide-border">
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            Grok
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            API
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            Company
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            Colossus
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            Careers
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left w-full text-primary flex-1 text-lg hover:text-primary underline-offset-4">
                            News
                        </button>
                    </li>
                </ul>
            </div>
            <div>
                <ul class="flex flex-col py-4 px-6 divide-y divide-border">
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left text-secondary text-sm mono-tag w-full flex-1 hover:text-primary">
                            Try Grok
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left text-secondary text-sm mono-tag w-full flex-1 hover:text-primary">
                            Contact
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left text-secondary text-sm mono-tag w-full flex-1 hover:text-primary">
                            Legal
                        </button>
                    </li>
                    <li class="flex w-full py-3">
                        <button type="button" class="text-left text-secondary text-sm mono-tag w-full flex-1 hover:text-primary">
                            Privacy Policy
                        </button>
                    </li>
                </ul>
            </div>
        </div> -->
    </body>
</template>
<style lang="scss">
.text-primary {
    color: hsl(var(--primary));
}
.font-sans {
    font-family: var(--font-geist-sans);
}
.bg-background {
    background-color: hsl(var(--background));
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.min-h-screen {
    min-height: 100vh;
}
.top-bg-image {
    background-image: url("../assets/images/grok-3.webp");
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.center-bg-image {
    background-image: url("../assets/images/funding.webp");
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.bottom-bg-image {
    background-image: url("@/assets/images/grok-2.webp");
    background-size: auto 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.footer-bg-gradient {
    background-image: url("../assets/images/footer-gradient.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: 1;
}
</style>
